<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Select - a11y</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Select - a11y</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="outer-content">
      <ion-list>
        <ion-list-header>
          <ion-label>
            Native Select
          </ion-label>
        </ion-list-header>

        <div class="native-select-wrapper">
          <label for="pet-select">Favorite Pet</label>

          <select name="pets" id="pet-select">
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
            <option value="hamster">Hamster</option>
            <option value="parrot">Parrot</option>
            <option value="spider">Spider</option>
            <option value="goldfish">Goldfish</option>
          </select>
        </div>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Custom Label Ionic Select
          </ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>Favorite Pet</ion-label>

          <ion-select>
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="hamster">Hamster</ion-select-option>
            <ion-select-option value="parrot">Parrot</ion-select-option>
            <ion-select-option value="spider">Spider</ion-select-option>
            <ion-select-option value="goldfish">Goldfish</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Favorite Pet</ion-label>

          <ion-select placeholder="Select a Pet">
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="hamster">Hamster</ion-select-option>
            <ion-select-option value="parrot">Parrot</ion-select-option>
            <ion-select-option value="spider">Spider</ion-select-option>
            <ion-select-option value="goldfish">Goldfish</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Favorite Pet</ion-label>

          <ion-select value="spider">
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="hamster">Hamster</ion-select-option>
            <ion-select-option value="parrot">Parrot</ion-select-option>
            <ion-select-option value="spider">Spider</ion-select-option>
            <ion-select-option value="goldfish">Goldfish</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Alert Ionic Select
          </ion-label>
        </ion-list-header>

        <ion-item>
          <label for="ionic-select">Favorite Pet</label>

          <ion-select id="ionic-select">
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="hamster">Hamster</ion-select-option>
            <ion-select-option value="parrot">Parrot</ion-select-option>
            <ion-select-option value="spider">Spider</ion-select-option>
            <ion-select-option value="goldfish">Goldfish</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Popover Ionic Select
          </ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>Favorite Pet</ion-label>

          <ion-select interface="popover">
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="hamster">Hamster</ion-select-option>
            <ion-select-option value="parrot">Parrot</ion-select-option>
            <ion-select-option value="spider">Spider</ion-select-option>
            <ion-select-option value="goldfish">Goldfish</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-list>

      <ion-list>
        <ion-list-header>
          <ion-label>
            Action Sheet Ionic Select
          </ion-label>
        </ion-list-header>

        <ion-item>
          <ion-label>Favorite Pet</ion-label>

          <ion-select interface="action-sheet">
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="hamster">Hamster</ion-select-option>
            <ion-select-option value="parrot">Parrot</ion-select-option>
            <ion-select-option value="spider">Spider</ion-select-option>
            <ion-select-option value="goldfish">Goldfish</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-list>


    </ion-content>

    <style>
      .native-select-wrapper {
        display: flex;

        padding: 16px;
      }

      label {
        flex: 1;
      }
    </style>

    <script>

    </script>
  </ion-app>
</body>

</html>
